<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- <el-col :span="8"> -->
      <el-card>
        <el-calendar v-model="row.yearMonth">
          <template slot="dateCell" slot-scope="{ data }">
            <span>{{ data.day.split("-").slice(2).join("-") }}</span>
            <div v-for="(item, i) in dataList" :key="i">
              <div v-if="item.date == data.day" style="color: red">
                上新({{ item.content }})
              </div>
            </div>
          </template>
        </el-calendar>
      </el-card>
      <!-- </el-col> -->
    </el-row>
  </div>
</template>

<script>
// import KoiCardI from "./zindex/KoiCardI.vue";
export default {
  // components: { KoiCardI },
  props: {
    row: Object,
    default: () => {},
  },
  data() {
    return {
      // value: new Date(),
      dataList: [
        { date: "2024-11-08", content: "2" },
        { date: "2024-05-08", content: "3" },
        { date: "2024-11-03", content: "4" },
        { date: "2024-11-28", content: "5" },
      ],
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleGo(path) {
      this.$router.push({
        path: path,
      });
    },
  },
};
</script>

<style  lang="scss">
.el-calendar-table .el-calendar-day {
  width: 100%;
  height: 50px;
  text-align: center;
}
.el-calendar__header {
  padding: 5px !important;
}
.el-calendar__body {
  padding: 0px !important;
}
.el-calendar-table thead th {
  padding: 0;
}
</style>
<style  lang="scss" scoped>
::v-deep .el-calendar__header .el-button-group {
  display: none;
}
</style>